<template>
  <div class="content">
    <div class="content-left">
      <div class="conl-top"><img src="../assets/img/logo.png" /></div>
      <div class="conl-other">
        <el-menu :router="true"
                 class="el-menu-vertical-demo"
                 :collapse="barsid"
                 :default-active="active"
                 :unique-opened="true"
                 background-color="#1F2128"
                 text-color="#B5B5B5"
                 active-text-color="#ffffff"
                 @open="handleOpen"
                 @close="handleClose">
          <template v-for="(item,index) in authority">
            <el-submenu v-bind:key="index"
                        :index="item.path"
                        v-if="item.children&&item.children.length>0">
              <template slot="title">
                <img :src="item.img"
                     class="title-img" />
                <span class="title-name">{{ item.title }}</span>
              </template>
              <el-menu-item :index="item1.path"
                            v-for="(item1, az) in item.children"
                            :key="az">
                <span class="title-name">{{ item1.title }}</span>
              </el-menu-item>
            </el-submenu>
            <el-menu-item v-bind:key="index"
                          :index="item.path"
                          v-if="!item.no&&!item.children">
              <img :src="item.img"
                   class="title-img" />
              <span class="title-name">{{ item.title }}</span>
            </el-menu-item>
          </template>
        </el-menu>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "",
  data () {
    return {
      isclose: false,
      active: '/1',
      flag: true,
      authority: [], // 菜单

    };
  },
  mounted () {
    var href = window.location.href
    var str = href.substring(href.lastIndexOf('/'), href.length)
    this.active = str
    this.init()
  },
  watch: {
    $route (to, from) {
      this.active = to.path
    },
  },
  computed: {
    barsid () {
      return this.$root.barflag
    }
  },
  //方法
  methods: {
    init () {
      this.$getRequest('/getRouters', {}).then((res) => {
        if (res.code == 200) {
          this.authority = res.data
        }
      })
    },
    handleOpen (key, keyPath) {
    },
    handleClose (key, keyPath) {
    },
  },
};
</script>
<style scoped>
.content {
  max-width: 200px;
  background: #1f2128;
  min-height: 100vh;
  height: 100%;
}
.content-left {
  height: 100%;
}
.conl-top {
  width: 100%;
  height: 70px;
  background: #0655ce;
}
.conl-top > img {
  width: 49px;
  height: 52px;
  margin: auto;
  padding-top: 9px;
  display: block;
}
.conl-other {
  height: calc(100% - 70px);
  background: #1f2128;
}
.title-img {
  width: 18px;
  height: 18px;
  margin-right: 20px;
}
.title-name {
  font-size: 16px;
}
.conl-other > .el-menu {
  border: none !important;
}
.el-menu-vertical-demo:not(.el-menu--collapse) {
  width: 200px !important;
}
</style>